<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>比特币练习</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
          integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">


</head>
<body>
<div class="container-fluid" style="padding: 5px 50px 5px 50px;">
    <div class="row">
        <div class="page-header">
            <h1 style="text-align: center;">比特币模拟器</h1>
        </div>
        <div class="alert alert-info" role="alert">
            <div class="btn-group btn-group-justified" role="group" aria-label="...">
                <div class="btn-group" role="group" style="width:10%;">
                    <button type="button" class="btn btn-default">个人账户：</button>
                </div>
                <div class="btn-group" role="group" style="width:80%;">
                    <button type="button" class="btn btn-default" th:text="${address}"
                            style="text-align: left;"></button>
                </div>
                <div class="btn-group" role="group" style="width:10%;">
                    <button type="button" class="btn btn-default">刷新</button>
                </div>
            </div>
        </div>
        <div class="alert alert-info" role="alert">
            <div class="btn-group btn-group-justified" role="group" aria-label="...">
                <div class="btn-group" role="group" style="width:10%;">
                    <button type="button" class="btn btn-default">账户余额：</button>
                </div>
                <div class="btn-group" role="group" style="width:80%;">
                    <button type="button" class="btn btn-default" th:text="${balance}"
                            style="text-align: left;" id="balanceId"></button>
                </div>
                <div class="btn-group" role="group" style="width:10%;">
                    <button type="button" class="btn btn-default" onclick="balanceRefresh()">刷新</button>
                </div>
            </div>
        </div>
        <div class="alert alert-info" role="alert">
            <div class="btn-group btn-group-justified" role="group" aria-label="...">
                <div class="btn-group" role="group" style="width:10%;">
                    <button type="button" class="btn btn-default" onclick="trans()">转账：</button>
                </div>
                <div class="btn-group" role="group" style="width:10%;">
                    <input type="text" class="form-control" placeholder="输入收款金额" aria-describedby="basic-addon2"
                           id="moneyId"/>
                </div>
                <div class="btn-group" role="group" style="width:80%;">
                    <input type="text" class="form-control" placeholder="输入收款人地址" aria-describedby="basic-addon2"
                           id="addressId"/>
                </div>
            </div>
        </div>
        <div class="alert alert-info" role="alert">
            <div class="btn-group btn-group-justified" role="group" aria-label="...">
                <div class="btn-group" role="group" style="width:10%;">
                    <button type="button" class="btn btn-default" onclick="miningTest()">挖矿测试:</button>
                </div>
                <div class="btn-group" role="group" style="width:90%;">
                    <button type="button" class="btn btn-default" id="miningTestBtnId" style="text-align: left;">
                        &nbsp;
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
<script>
    function miningTest() {
        $.ajax({
            url: "/block/mining/test",
            success: function (data) {
                if (data == 0) {
                    $("#miningTestBtnId").html("您的电脑计算太慢，矿被别人挖走了！");
                } else {
                    var myDate = new Date();
                    var year = myDate.getFullYear() + "-" + (myDate.getMonth() + 1) + "-" + myDate.getDate() + " ";
                    var time = myDate.getHours() + ":" + myDate.getMinutes() + ":" + myDate.getSeconds();
                    $("#miningTestBtnId").html("挖到矿：[" + data + "]，奖励钱币：[10]，时间：[" + (year + time) + "]");
                }
            }
        });
    }

    function balanceRefresh() {
        $.ajax({
            url: "/wallet/balance",
            success: function (data) {
                $("#balanceId").html(data);
            }
        });
    }

    function trans() {
        var address = $.trim($("#addressId").val());
        var money = $.trim($("#moneyId").val());
        if (address.length > 0 && money.length > 0) {
            $.ajax({
                url: "/wallet/trans?account=" + address + "&money=" + money,
                success: function (data) {
                    alert(data);
                }
            });
        }
    }
</script>
</body>
</html>
